<template name="agentInfo">
	{{#if editingAgent}}
		{{> agentEdit (agentToEdit)}}
	{{else}}
		{{#unless isReady}}
			{{> loading }}
		{{else}}
			{{#with agent}}
				<section class="contextual-bar__content">
					<div class="rc-user-info-wrapper">
						<div class="rc-user-info">
							<div class="rc-user-info__avatar">
								{{> avatar username=username}}
							</div>
							<h3 title="{{name}}" class="rc-user-info__name"><i class="status-{{status}}"></i> {{name}}</h3>
							{{#if username}}<p class="rc-user-info__username">@{{username}}</p>{{/if}}
							{{# userPresence uid=uid}}<span class="rc-header__status rc-user-info__status">
								<div class="rc-header__status-bullet rc-header__status-bullet--{{agentStatus}}" title="{{_ agentStatus}}"></div>
								<div class="rc-header__visual-status">{{agentStatusText}}</div>
							</span>{{/userPresence}}
						</div>

						<div class="rc-user-info-action">
							{{#if canEdit}}
								<button class="js-action rc-user-info-action__item edit-agent">
									{{> icon block="rc-user-info-action__icon" icon="edit" }}
									{{_ "Edit"}}
								</button>
							{{/if}}
							{{#requiresPermission 'manage-livechat-agents'}}
								<button class="js-action rc-user-info-action__item delete-agent">
									{{> icon block="rc-user-info-action__icon" icon="trash" }}
									{{_ "Delete"}}
								</button>
							{{/requiresPermission}}
						</div>
						<div class="rc-user-info-details">
							{{#if hasEmails}}
								<div class="rc-user-info-details__item">
									<label class="rc-user-info-details__label">{{_ "Email"}}</label>
									{{#each emails}} <a href="mailto:{{address}}" class="rc-user-info-details__info">{{address}}{{#if verified}}&nbsp;<i class="icon-ok success-color"></i>{{/if}}</a> {{/each}}
								</div>
							{{/if}}
							{{#if agentDepartments}}
								<div class="rc-user-info-details__item">
									<label class="rc-user-info-details__label">{{_ "Departments"}}</label>
									<ul class="chip-container current-user-roles">
										{{#each dept in agentDepartments}}
											<li class="agent-department" title="{{dept.name}}">{{dept.name}}</li>
										{{/each}}
									</ul>
								</div>
							{{/if}}
							{{#if customFieldsTemplate}}
								{{> Template.dynamic template=customFieldsTemplate data=agentDataContext }}
							{{/if}}
						</div>
					</div>
				</section>
			{{/with}}
		{{/unless}}
	{{/if}}
</template>
